<template>
  <div class="login">
    <div class="logo"></div>
    <div class="input-wrap"><input type="text" class="input-item" placeholder="请输入手机号" v-model="userId"></div>
    <div class="input-wrap"><input type="password" class="input-item" placeholder="请输入密码" v-model="userPwd"></div>
    <button class="login-btn wx-btn" :class="{active: canLogin}" @click="login">登录</button>
    <div class="login-footer">
      <div class="remember"><input type="checkbox" :vaule="remember" v-model="remember"><span>记住密码</span></div>
      <a class="" href="/Login/index">注册账号</a>
      <a class="forget-pwd" href="/forgetPwd.html?type=4">忘记密码</a>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import tools from 'COMMON/tools.js'
  import  { ToastPlugin } from 'vux'
  import Vue from 'vue'
  Vue.use(ToastPlugin)

  export default {
    name: 'login',
    data: function() {
      return {
        userId: "",
        userPwd: "",
        remember: true
      }
    },
    mounted() {
      this.userId = tools.getCookie('user_id')
      this.userPwd = tools.getCookie('user_pwd')
    },
    computed: {
      canLogin() {
        return this.userId != '' && this.userPwd != '';
      }
    },
    methods: {
      login() {
        if(!this.canLogin) {
          return;
        }
        let that = this;
        axios.post('/login/login', {
          phone: that.userId,
          password: that.userPwd
        }).then((res) => {
          if (res.msg == 'success') {
            if (that.remember) {
              tools.setCookie('user_id', that.userId);
              tools.setCookie('user_pwd', that.userPwd);
            }
            // todo: 登录成功跳转首页
            location.href = "/homepage.html"
          } else {
            that.$vux.toast.text(res.msg, 'middle');
          }
        })

      }
    }
  }
</script>

<style lang="less">
  @import "~COMMON/common.less";
body{margin:0px;padding: 0px;background-color: #fff;}
  .login {
    padding: 0 50px;
    .logo {
      width: 75px;
      height: 75px;
      margin: 0 auto;
      margin-top: 100px;
      margin-bottom: 20px;
      border-radius: 13px;
      background-image: url(~IMGS/logo.jpg);
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .input-wrap {
      // .Placeholder-color(#ccc);
      margin-top: 30px;
      .input-item {
        box-sizing: border-box;
        font-size: 16px;
        border: none;
        outline: none;
        width: 100%;
        padding-left: 10px;
        line-height: 44px;
        border-bottom: 1px solid #EEEEEE;
      }
    }
    .login-footer {
      margin-top: 15px;
      font-size: 14px;
      color: #333;
      .remember {
        margin-bottom: 15px;
        >input,
        >span {
          vertical-align: middle;
        }
      }
      >a {
      }
      .forget-pwd {
        float: right;
      }
    }
  }
</style>